import { inject, h, watch, onMounted } from "vue"
import { checkTargetSlotIsEmpty } from "./util"
import { ProvideContextmenu, ProvideSelectStateKey } from "./keys"

function WebExcelContextmenu(props: Props & { copyHandel: Function, pasteHandel: Function }, { slots }) {
    const {
        visibleContextmenu, 
        positionContextmenu, 
        checkVisibleContextmenu, 
        tiggleVisibleContextmenu 
    } = inject(ProvideContextmenu) as ContextmenuResult
    const { selectCellState  } = inject(ProvideSelectStateKey) as SelectCellStateResult

    function domClickHandel(){
        tiggleVisibleContextmenu(false)
    }
    watch(visibleContextmenu, (value) => {
        if(value) {
            document.addEventListener('click', domClickHandel)
        } else {
            document.removeEventListener('click', domClickHandel)
        }
    })


    function getSelectAreaData() {
        const { startX, endX, startY, endY } = selectCellState.value

        const minX = Math.min(startX!, endX!)
        const maxX = Math.max(startX!, endX!)
        const minY = Math.min(startY!, endY!)
        const maxY = Math.max(startY!, endY!)

        const columns: Column[] = []
        const records: Object[] = []
        const rowindexs: number[] = []
        const colindexs: number[] = []

        for (let y = minY; y <= maxY; y++ ) {
            rowindexs.push(y)
            records.push(props.dataSource[y])
        }
        for ( let x = minX; x <= maxX; x++ ) {
            colindexs.push(x)
            columns.push(props.columns[x])
        }

        return {
            columns, records, rowindexs, colindexs
        }
    }

    return h(
        'div',
        { 
            class: `grid-contextmenu ${ checkVisibleContextmenu() ? 'show' :'hide' }`,
            style: {
                left: positionContextmenu.value.left + 'px',
                top: positionContextmenu.value.top + 'px'
            },
            onClick: (e) => e.stopPropagation()
        }, 
        {
            default: () => {
                if (!checkVisibleContextmenu()) return undefined

                const slot = slots.contextmenu?.()
                if (!checkTargetSlotIsEmpty(slot)) return slot;

                const { columns, records, rowindexs, colindexs } = getSelectAreaData()
                const defaultMenus: ContextMenu[] = [
                    { label: "复制", onClick: () => {
                        return props.copyHandel?.()
                    } },
                    { label: "粘贴", onClick: () => {
                        return props.pasteHandel?.()
                    } },
                ]
                const menus = props.contextmenu ? props.contextmenu({ columns, records, rowindexs, colindexs }) : defaultMenus;

                return menus.map(item => {
                    return h(
                        'div',
                        { 
                            class: {
                                'grid-contextmenu-item': true,
                                disabled: item.disabled
                            },
                            onClick: async () => {
                                if (item.disabled) return;
                                await item.onClick?.({ columns, records, rowindexs, colindexs })
                                tiggleVisibleContextmenu(false)
                            }
                        },
                        {
                            default: () => {
                                if (item.rander) return item.rander({ columns, records, rowindexs, colindexs })
                                return item.label
                            }
                        }
                    )
                })
            }
        }
    )
}


export { WebExcelContextmenu }